<template>
  <div class="site-wrapper">
    <div class="main-overlay"></div>
    <!-- header -->
    <header class="header-default">
      <Navbar></Navbar>
    </header>
    <!-- hero section -->
    <section id="hero">
      <div class="container-xl">
        <div class="row gy-4">
          <div class="col-lg-8"><!-- featured post large -->
            <div class="post featured-post-lg">
              <div class="details clearfix"><a href="blog.html" class="category-badge">灵感</a>
                <h2 class="post-title"><a href="blog-single.html">5 Easy Ways You Can Turn Future Into Success</a></h2>
                <ul class="meta list-inline mb-0">
                  <li class="list-inline-item"><a href="#">Katen Doe</a></li>
                  <li class="list-inline-item">29 March 2021</li>
                </ul>
              </div>
              <a href="blog-single.html">
              <div class="thumb rounded">
                <div class="inner data-bg-image" data-bg-image="/source/images/posts/featured-lg.jpg"></div>
              </div>
              </a></div>
          </div>
          <div class="col-lg-4"><!-- post tabs -->
            <div class="post-tabs rounded bordered"><!-- tab navs -->
              <ul class="nav nav-tabs nav-pills nav-fill" id="postsTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button aria-controls="popular" aria-selected="true" class="nav-link active" data-bs-target="#popular" data-bs-toggle="tab" id="popular-tab" role="tab" type="button">热门文章</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button aria-controls="recent" aria-selected="false" class="nav-link" data-bs-target="#recent" data-bs-toggle="tab" id="recent-tab" role="tab" type="button">最新文章</button>
                </li>
              </ul>
              <!-- tab contents -->
              <div class="tab-content" id="postsTabContent"><!-- loader -->
                <div class="lds-dual-ring"></div>
                <!-- popular posts -->
                <div aria-labelledby="popular-tab" class="tab-pane fade show active" id="popular" role="tabpanel"><!-- post -->
                  <div class="post post-list-sm circle"  v-for="item in hotList" >
                    <div class="thumb circle">
                      <router-link :to="'/blog/'+item.id">
                      <img alt="post-title" :src="item.coverImage"/>
                     </router-link>
                    </div>
                    <div class="details clearfix">
                      <h6 class="post-title my-0"><router-link :to="'/blog/'+item.id">{{item.title}}</router-link>
                      </h6>
                      <ul class="meta list-inline mt-1 mb-0">
                        <li class="list-inline-item">{{item.createTime}}</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- recent posts -->
                <div aria-labelledby="recent-tab" class="tab-pane fade" id="recent" role="tabpanel"><!-- post -->
                  <div class="post post-list-sm circle" v-for="item in recentList">
                    <div class="thumb circle">
                      <router-link :to="'/blog/'+item.id">
                       <img alt="post-title" :src="item.coverImage"/>
                     </router-link>
                    </div>
                    <div class="details clearfix">
                      <h6 class="post-title my-0"><router-link :to="'/blog/'+item.id" >{{item.title}}</router-link>
                      </h6>
                      <ul class="meta list-inline mt-1 mb-0">
                        <li class="list-inline-item">{{item.createTime}}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- section main content -->
    <section class="main-content">
      <div class="container-xl">
        <div class="row gy-4">
          <div class="col-lg-8"><!-- section header -->
            <div class="section-header">
              <h3 class="section-title">推荐文章</h3>
              <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
            <div class="padding-30 rounded bordered">
              <div class="row gy-5">
                <div class="col-sm-6"><!-- post -->
                  <template  v-for="(item,index) in hotList">
                    <div  class="post"  v-if="index==0">
                      <div class="thumb rounded"><a href="blog.html" class="category-badge position-absolute">{{item.bizCategory.name}}</a><span class="post-format"><i class="icon-picture"></i></span>
                        <router-link :to="'/article/'+item.id">
                        <div class="inner"><img :src="item.coverImage" alt="post-title" /></div>
                        </router-link>
                      </div>
                      <ul class="meta list-inline mt-4 mb-0">
                        <li class="list-inline-item"><a href="#">{{item.author}}</a></li>
                        <li class="list-inline-item">{{item.createTime}}</li>
                      </ul>
                      <h5 class="post-title mb-3 mt-3"><router-link :to="'/article/'+item.id">{{item.title}}</router-link></h5>
                      <p class="excerpt mb-0" >{{item.description}}</p>
                    </div>
                  </template>
                </div>
                <div class="col-sm-6" ><!-- post -->
                  <template  v-for="(item,index) in hotList">
                    <div class="post post-list-sm square" v-if="index>0 && index<5" >
                      <div class="thumb rounded">
                        <router-link :to="'/article/'+item.id">
                        <div class="inner"><img alt="post-title" :src="item.coverImage"/></div>
                      </router-link>
                      </div>
                      <div class="details clearfix">
                        <h6 class="post-title my-0"><router-link :to="'/article/'+item.id">{{item.title}}</router-link>
                        </h6>
                        <ul class="meta list-inline mt-1 mb-0">
                          <li class="list-inline-item">{{item.createTime}}</li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
            <div class="spacer" data-height="50"></div>
            <!-- horizontal ads -->
            <div class="ads-horizontal text-md-center"><span class="ads-title">- 赞助广告-</span><a href="#"><img src="/source/images/ads/ad-750.png" alt="Advertisement" /></a></div>
            <div class="spacer" data-height="50"></div>
            <!-- section header -->
            <div class="section-header">
              <h3 class="section-title">热门文章</h3>
              <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
            <div class="padding-30 rounded bordered">
              <div class="row gy-5">
                <div  class="col-sm-6"><!-- post large -->
                  <template  v-for="(item,index) in hotList">
                    <div v-if="index<1" class="post">
                      <div class="thumb rounded"><a href="blog.html" class="category-badge position-absolute">{{item.bizCategory.name}}</a><span class="post-format"><i class="icon-picture"></i></span><a :href="'/blog/article/'+item.id">
                        <div class="inner"><img :src="item.coverImage" alt="post-title" style="height: 182px;"  /></div>
                      </a></div>
                      <ul class="meta list-inline mt-4 mb-0">
                        <li class="list-inline-item"><a href="#">{{item.author}}</a></li>
                        <li class="list-inline-item">{{item.createTime}}</li>
                      </ul>
                      <h5 class="post-title mb-3 mt-3"><router-link :to="'/article/'+item.id" >{{item.title}}</router-link></h5>
                      <p class="excerpt mb-0">{{item.description}}</p>
                    </div>
                  </template>
                  <!-- post -->
                  <template  v-for="(item,index) in hotList">
                    <div class="post post-list-sm square before-seperator" v-if="index>0 && index<6">
                      <div class="thumb rounded">
                        <router-link :to="'/article/'+item.id" >
                        <div class="inner"><img alt="post-title" :src="item.coverImage"/></div>
                      </router-link>
                      </div>
                      <div class="details clearfix">
                        <h6 class="post-title my-0"><router-link :to="'/article/'+item.id">{{item.title}}</router-link></h6>
                        <ul class="meta list-inline mt-1 mb-0">
                          <li class="list-inline-item">{{item.createTime}}</li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </div>
                <div  class="col-sm-6"><!-- post large -->
                  <template v-for="(item,index) in recentList">
                    <div v-if="index < 1" class="post">
                      <div class="thumb rounded"><a href="blog.html" class="category-badge position-absolute">{{item.bizCategory.name}}</a><span class="post-format"><i class="icon-picture"></i></span><a href="blog-single.html">
                        <div class="inner"><img :src="item.coverImage" alt="post-title" style="height: 182px;" /></div>
                      </a></div>
                      <ul class="meta list-inline mt-4 mb-0">
                        <li class="list-inline-item"><a href="#">{{item.author}}</a></li>
                        <li class="list-inline-item">{{item.createTime}}</li>
                      </ul>
                      <h5 class="post-title mb-3 mt-3"><router-link :to="'/article/'+item.id">{{item.title}}</router-link></h5>
                      <p class="excerpt mb-0" :text="item.description"></p>
                    </div>
                    <!-- post -->
                    <div class="post post-list-sm square before-seperator"  v-if="index>0&&index <6">
                      <div class="thumb rounded"><router-link :to="'/article/'+item.id">
                        <div class="inner"><img alt="post-title" :src="item.coverImage"/></div>
                      </router-link>
                      </div>
                      <div class="details clearfix">
                        <h6 class="post-title my-0"><router-link :to="'/article/'+item.id">{{item.title}}</router-link></h6>
                        <ul class="meta list-inline mt-1 mb-0">
                          <li class="list-inline-item">{{item.createTime}}</li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
            <div class="spacer" data-height="50"></div>
            <!-- section header -->
            <div class="section-header">
              <h3 class="section-title">灵感</h3>
              <img src="/source/images/wave.svg" class="wave" alt="wave" />
              <div class="slick-arrows-top">
                <button type="button" data-role="none" class="carousel-topNav-prev slick-custom-buttons" aria-label="Previous"><i class="icon-arrow-left"></i></button>
                <button type="button" data-role="none" class="carousel-topNav-next slick-custom-buttons" aria-label="Next"><i class="icon-arrow-right"></i></button>
              </div>
            </div>
            <div class="row post-carousel-twoCol post-carousel" data-bs-ride="carousel"><!-- post -->
              <div class="post post-over-content col-md-6">
                <div class="details clearfix"><a href="blog.html" class="category-badge">Inspiration</a>
                  <h4 class="post-title"><a href="blog-single.html">Want To Have A More Appealing Tattoo?</a></h4>
                  <ul class="meta list-inline mb-0">
                    <li class="list-inline-item"><a href="#">Katen Doe</a></li>
                    <li class="list-inline-item">29 March 2021</li>
                  </ul>
                </div>
                <a href="blog-single.html">
                  <div class="thumb rounded">
                    <div class="inner"><img src="/source/images/posts/inspiration-1.jpg" alt="thumb" /></div>
                  </div>
                </a></div>
              <div class="post post-over-content col-md-6">
                <div class="details clearfix"><a href="blog.html" class="category-badge">Inspiration</a>
                  <h4 class="post-title"><a href="blog-single.html">Feel Like A Pro With The Help Of These 7 Tips</a></h4>
                  <ul class="meta list-inline mb-0">
                    <li class="list-inline-item"><a href="#">Katen Doe</a></li>
                    <li class="list-inline-item">29 March 2021</li>
                  </ul>
                </div>
                <a href="blog-single.html">
                  <div class="thumb rounded">
                    <div class="inner"><img src="/source//images/posts/inspiration-2.jpg" alt="thumb" /></div>
                  </div>
                </a></div>
<!--              <div class="post post-over-content col-md-6">
                <div class="details clearfix"><a href="blog.html" class="category-badge">Inspiration</a>
                  <h4 class="post-title"><a href="blog-single.html">Want To Have A More Appealing Tattoo?</a></h4>
                  <ul class="meta list-inline mb-0">
                    <li class="list-inline-item"><a href="#">Katen Doe</a></li>
                    <li class="list-inline-item">29 March 2021</li>
                  </ul>
                </div>
                <a href="blog-single.html">
                  <div class="thumb rounded">
                    <div class="inner"><img src="/source/images/posts/inspiration-1.jpg" alt="thumb" /></div>
                  </div>
                </a></div>
              <div class="post post-over-content col-md-6">
                <div class="details clearfix"><a href="blog.html" class="category-badge">Inspiration</a>
                  <h4 class="post-title"><a href="blog-single.html">Feel Like A Pro With The Help Of These 7 Tips</a></h4>
                  <ul class="meta list-inline mb-0">
                    <li class="list-inline-item"><a href="#">Katen Doe</a></li>
                    <li class="list-inline-item">29 March 2021</li>
                  </ul>
                </div>
                <a href="blog-single.html">
                  <div class="thumb rounded">
                    <div class="inner"><img src="/source//images/posts/inspiration-2.jpg" alt="thumb" /></div>
                  </div>
                </a></div>-->
            </div>
            <div class="spacer" data-height="50"></div>
            <!-- section header -->
            <div class="section-header">
              <h3 class="section-title">最新文章</h3>
              <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
            <div class="padding-30 rounded bordered">
              <div class="row">
                <div class="post post-list clearfix" v-for="item in records" >
                  <div class="thumb rounded">
                    <span class="post-format-sm"><i class="icon-picture"></i></span>
                    <router-link :to="'/article/'+item.id">
                      <div class="inner"><img alt="post-title" style="width:265px;height:150px" :src="item.coverImage" /></div>
                    </router-link>
                  </div>
                  <div class="details">
                    <ul class="meta list-inline mb-3">
                      <li class="list-inline-item"><a href="#">{{item.author}}</a></li>
                      <li class="list-inline-item"><a href="#">{{item.bizCategory.name}}</a></li>
                      <li class="list-inline-item">{{item.createTime}}</li>
                    </ul>
                    <h5 class="post-title"><router-link :to="'/article/'+item.id">{{item.title}}</router-link></h5>
                    <p class="excerpt mb-0">{{item.description}}</p>
                  </div>
                </div>
              </div>
              <!-- load more button -->
              <div class="text-center">
                <button class="btn btn-simple" id="read-more" @click="getArticles">阅读更多</button>
              </div>
            </div>
          </div>
          <div class="col-lg-4"><!-- sidebar -->
            <Sidebar/>
          </div>
        </div>
      </div>
    </section>
    <!-- instagram feed -->
  <!--  <div class="instagram">
      <div class="container-xl">&lt;!&ndash; button &ndash;&gt;<a href="#" class="btn btn-default btn-instagram">@Katen on Instagram</a>&lt;!&ndash; images &ndash;&gt;
        <div class="instagram-feed d-flex flex-wrap">
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-1.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-2.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-3.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-4.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-5.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-6.jpg" alt="insta-title" /></a></div>
        </div>
      </div>
    </div>-->
    <!-- footer -->
    <Footer></Footer>
  </div>
</template>

<script>
module.exports={
  name: "home",
  components: {
    'navbar': httpVueLoader('../components/navbar.vue'),
    'footer': httpVueLoader('../components/footer.vue'),
    'sidebar':httpVueLoader('../components/sidebar.vue'),
  },
  data: function() {
    return {
      records: [],
      recentList: [],
      hotList: [],
      randomList: [],
      pageNum:1
    }
  },
  mounted(){
    this.getArticles(1);
    this.getHot();
    this.getRecent();
    this.init();
  },
  methods: {
    getArticles(){
      axios.get('/blog/api/articles',{params:{"pageNumber": this.pageNum, "pageSize": 10}})
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.records=this.records.concat(data.records);
            this.pageNum++;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    },
    getHot(){
      axios.get('/blog/api/hot/articles', {params: {size: 5}})
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.hotList=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    },
    getRecent(){
      axios.get('/blog/api/recent/articles',{params: {size: 5}})
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.recentList=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    },
    init(){
      setInterval(()=>{
        // 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
        $(".carousel-topNav-next").click();
      }, 3000)

    }
  }
}
</script>

<style scoped>

</style>